<script setup lang="ts">
import { ref } from "vue";

import { ElCard, ElDialog, ElForm, ElFormItem, ElText } from "element-plus";
import DialogPassword from "./components/DialogPassword.vue";

import useEnum from "@/hooks/useEnum";
import useApp from "@/store/useApp";

const ERole = useEnum("EnumRoles");
const stataApp = useApp();
const visible = ref(false);

</script>

<template>

  <ElCard header="个人中心">
    <ElForm label-width="10em" label-suffix="：">
      <ElFormItem label="昵称">{{ stataApp.userInfo?.nickname }}</ElFormItem>
      <ElFormItem label="手机号">{{ stataApp.userInfo?.mobile }}</ElFormItem>
      <!-- <ElFormItem label="角色">
        {{ ERole.get("label", stataApp.userInfo?.role) }}
      </ElFormItem>
      <ElFormItem label="密码">
        <ElText type="primary" class="cursor-pointer" @click="visible = true"
          >修改密码</ElText
        >
      </ElFormItem> -->
    </ElForm>
  </ElCard>

  <ElDialog v-model="visible" title="修改密码" destroy-on-close width="500">
    <DialogPassword />
  </ElDialog>
</template>
